<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>
<body>
    <div id="app">
        <van-uploader :after-read="afterRead" />
    </div>
</body>

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    
    <script>
      // 在 #app 标签下渲染一个按钮组件
      new Vue({
        el: '#app',
        methods: {
            afterRead(file) {
            // 此时可以自行将文件上传至服务器
                var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
                formData.append('file', file.file); //接口需要传的参数
                $.ajax({//jQuery方法，此处可以换成其它请求方式
                    url: 'https://jsonplaceholder.typicode.com/posts?id=123',
                    dataType: "json",
                    type: "post",
                    data: formData, 
                    processData: false,//不去处理发送的数据
                    contentType: false,//不去设置Content-Type请求头
                    error: function (res) {undefined
                        console(res);
                        return;
                    },
                    success: function (res) {undefined
                        console(res);
                        return;
                    }
                    
                })
            },
        },
      });
    

    </script>
</html>